<template>
	<view class="zone">
		<Header title="往期记录" color="#fff" :headertype="4"></Header>

		<view class="main">
			<view class="main_top">
				<view class="head_text">
					<text>近100期被赶跑记录</text>
				</view>
				<view class="pic_text" >
					<view class="demo" v-for="(item,index) in list" :key="index">
						<text class="people">{{name[index-1]}}</text>
						<image :src="`http://img.cpgm.cc/panda/static/wolfkill/${index}.png`" mode="widthFix"></image>
						<text class="sz">{{item}}</text>
						<text class="gp">赶跑次数</text>
					</view>
				</view>
			</view>
			<!-- 近10期死亡记录 -->
			<view class="main_center">
				<view class="head_text">
					<text>近8期死亡记录</text>
				</view>
				<view class="pic_text">
					<view class="demo" v-for="(item,index) in list_ten" :key="index">
						<text>第{{item.phase}}期</text>
						<image :src="`http://img.cpgm.cc/panda/static/wolfkill/${item.building_id }.png`" mode="widthFix" />
						<text class="people">{{item.building_str}}</text>
					</view>
					<view class="empty2" v-if="list_ten==''">
						<image src="http://img.qxgm.site/sjcs/static/public/empty.png" mode="widthFix" />
						<text>数据为空</text>
					</view>
				</view>
			</view>
			
			<!-- 我的参与记录 -->
			<!-- <view class="box">
				<h3>我的参与记录</h3>
				<view class="flexbox">
					<view class="f_item">
						<image src="http://img.qxgm.site/sjcs/static/my/stone.png" mode="widthFix" />
						<view class="word">
							<text>共投入</text>
							<text>{{invest_sum}}</text>
						</view>
					</view>

					<view class="f_item">
						<image src="http://img.qxgm.site/sjcs/static/my/stone.png" mode="widthFix" />
						<view class="word">
							<text>共获得</text>
							<text>{{earn_num}}</text>
						</view>
					</view>
				</view>
			</view> -->

			<view class="botbox">
				<h3>我的参与记录</h3>
				<view class="list">
					<view class="l_item" v-for="(item,index) in datalist" :key="index">
						<view class="left">
							<text>扮演{{name[item.building_id-1]}}</text>
							<text>第{{item.phase}}期｜{{item.end_time | dateFormat}}</text>
						</view>
						<view class="right">
							<text class="fail" v-if="item.invest_status == 3">-{{item.invest_num}}</text>
							<text class="success" v-if="item.invest_status == 4">+{{item.profit}}</text>
							<text>投入{{item.invest_num}}水晶</text>
						</view>
					</view>
					<view class="empty2" v-if="datalist==''">
						<image src="http://img.qxgm.site/sjcs/static/public/empty.png" mode="widthFix" />
						<text>数据为空</text>
					</view>
					<u-loadmore v-else :status="status" :icon-type="iconType" :load-text="loadText" />

				</view>
			</view>



			<!-- <p>第{{item.phase}}期</p>
						<p>
							<image src="http://img.cpgm.cc/panda/static/home/dio.png" mode="widthFix" />
							<text>{{item.invest_num}}</text>
						</p>
						<p>
							<image src="http://img.cpgm.cc/panda/static/home/dio.png" mode="widthFix" />
							<text>{{item.profit}}</text>
						</p>
						<p>{{item.hoe_num}}</p> -->



		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: '',
				list_ten:'',
				invest_sum:'',//投入
				earn_num:'',//获得
				page:1,
				max_page:'',
				datalist:[],//我的参与记录
				name:['牛魔王','白骨精','铁扇公主','蝎子精','羊力大仙','玉兔精','金翅大鹏','九尾妖狐'],
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '没有更多了'
				},
			};
		},
		filters: {
			//过滤器 用于格式化时间
			dateFormat: function(value) {
				var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var year = date.getFullYear();
				var month = ("0" + (date.getMonth() + 1)).slice(-2);
				var sdate = ("0" + date.getDate()).slice(-2);
				var hour = ("0" + date.getHours()).slice(-2);
				var minute = ("0" + date.getMinutes()).slice(-2);
				var second = ("0" + date.getSeconds()).slice(-2);
				// 拼接
				var result = year + "-" + month + "-" + sdate + ' ' + hour + ':' + minute + ':' + second
				// 返回
				return result;
			},
		},
		onLoad(){
			this.getWerewolfLog();
			this.getJoinLog();
		},
		onReachBottom() {
			if (this.page >= this.max_page){
				this.status = 'nomore' 
				return;
			} 
			this.status = 'loading';
			this.page = ++this.page;
			this.getJoinLog()
			setTimeout(() => {
				if (this.page > this.max_page || this.page == this.max_page) this.status = 'nomore';
				else this.status = 'loading';
			}, 500)
		},
		methods: {

			async getWerewolfLog(){
				let res = await this.$http.index.getWerewolfLog()
				// console.log(res);
				this.list = res.data.hundred
				this.list_ten = res.data.ten
				this.invest_sum = res.data.invest_sum
				this.earn_num = res.data.earn_num
			},
			// 获取我的参与记录
			async getJoinLog(){
				let res = await this.$http.index.getJoinLog({
					page:this.page,
				})
				this.datalist = [...this.datalist , ...res.data.data]
				this.max_page = res.data.last_page
				if (this.page > this.max_page || this.page == this.max_page) this.status = 'nomore';
			},
		},
	}
</script>

<style lang="less">
	.zone {
		background: #000000;
        min-height: 100vh;
	}


	.main {
		width: 100%;
		padding: 15px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.main_top {
			width: 100%;
			padding: 15px;
			background: rgba(255,255,255,0.1);
			box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
			border-radius: 5px;
		}

		.main_center {
			width: 100%;
			padding: 15px;
			background: #1B1613;
			border-radius: 6px;
			background: rgba(255,255,255,0.1);
			box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
			border-radius: 5px;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 10px;
		}

		.main_buttom {
			width: 100%;
			background: rgba(255,255,255,0.1);
			box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
			border-radius: 5px;
			padding: 15px;
			margin-top: 10px;
		}

		.head_text {
			width: 100%;
			height: 18px;
			font-size: 14px;
			line-height: 18px;
			font-weight: bold;
			color: #fff;
		}

		.pic_text {
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			margin-top: 10px;

			.demo {
				width: 23%;
				background: #fff;
				border-radius: 8px;
				position: relative;
				margin: 5px 1%;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 10px 0;

				image {
					width: 90%;
				}

				.people {
					font-size: 12px;
					font-weight: 600;
					color: #000;
				}

				
				.demo_buttom{
					width: 100%;
					height: 18px;
					font-size: 13px;
					font-weight: bold;
					color: #000;
					line-height: 18px;
					position: absolute;
					text-align: center;
					top: 60%;left: 0;
				}
			}
		}
	}


.box {
	width: 100%;
	background: rgba(255,255,255,0.1);
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
	border-radius: 5px;
	padding: 10px;
	margin-top: 10px;

	h3 {
		color: #fff;
		font-size: 14px;
		margin-bottom: 12px;
	}
}

.flexbox {
	display: flex;
	align-items: center;
	justify-content: space-between;
	
	.f_item {
		width: 48%;
		padding: 10px;
		background: #EEE7D2;
		border-radius: 5px;
		display: flex;
		align-items: center;

		image {
			width: 50px;
			margin-right: 10px;
		}

		.word {
			display: flex;
			flex-direction: column;

			text:nth-child(1) {
				color: #70390A;
				font-size: 13px;
			}
			text:nth-child(2) {
				color: #D03900;
				font-size: 14px;
				margin-top: 4px;
			}
		}
	}
}

.empty2 {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	image {
		width: 40%;
	}
	text {
		color: #fff;
	}
}

.botbox {
	width: 100%;
	background: rgba(255,255,255,0.1);
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
	border-radius: 5px;
	padding: 10px;
	margin-top: 10px;

	h3 {
		color: #fff;
		font-size: 14px;
		margin-bottom: 12px;
	}
}

.list {
	width: 100%;
	border-radius: 10px;
	overflow: hidden;
}
.topbvox {
	display: flex;
	align-items: center;
	justify-content: space-between;

	text {
		flex: 1;
		text-align: center;
		color: #fff;
	}
}

.l_item  {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px;
	background: #fff;
	border-radius: 10px;
	margin: 10px 0;

	.left {
		display: flex;
		flex-direction: column;
		text:nth-child(1) {
			color: #000;
			font-size: 14px;
			font-weight: 600;
		}
		text:nth-child(2) {
			color: #000;
			font-size: 12px;
			margin-top: 4px;
		}
	}

	.right {
		display: flex;
		flex-direction: column;
		align-items: flex-end;

		text:nth-child(1) {
			font-size: 13px;
			font-weight: 600;
			line-height: 18px;
		}

		text:nth-child(2) {
			color: #000;
			font-size: 13px;
			font-weight: 600;
			line-height: 18px;
			margin-top: 4px;
		}
	}

	p {
		flex: 1;
		text-align: center;
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 20px;
		}
		text {
			color: #fff;
		}
	}
}

.bg2 {
	background: rgba(238,231,210,0.15);
}

.sz {
	color: #000;
	font-size: 14px;
	font-weight: 600;
}

.gp {
	color: rgba(51, 51, 51,0.51);
	font-size: 12px;
}

.success {
	color: #00A243 !important;
}
.fail {
	color: #FE5C4F !important;
}



</style>